<template>
    <div>
        <el-container>
            <!-- <splitpanel title="商品分类" icon="menu" :request="request" :department="department"
                  :defaultProps="defaultProps"
                  @handleNodeClick="handleNodeClick"></splitpanel> -->
            <category-panel title="商品分类" icon="tree" :request="request" @delClick="delClick" @notClick="notClick" @nodeClick="nodeClick" isshow='false'></category-panel>
            <el-main class="el-mainBox">
                <el-header>
                    <div class="report_header" ref="headerHeight">
                        <div class="report_header_left"></div>
                        <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
                            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="addClick" v-permission="['productCategory.add']">新增</el-button>
                        </div>
                    </div>
                </el-header>
                <div class="table-container">
                    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border v-loadMore="[payLoads,'sysMenu-list']" stripe :tree-props="{children: 'childrens', hasChildren: 'hasChildren'}">
                        <el-table-column fixed="left" prop="name" label="分类名称" sortable width="250"></el-table-column>
                        <!-- <el-table-column prop="url" label="分类地址" align="center" width="250"></el-table-column> -->
                        <el-table-column prop="icon" label="图标" align="center" width="100">
                            <template slot-scope="{row}">
                                <!--                <svg-icon class="primary" :icon-class="row.icon"/>-->
                            </template>
                        </el-table-column>
                        <!-- <el-table-column
              prop="menuType"
              label="菜单类型"
              align="center"
              width="100">
              <template slot-scope="{row}">
                <el-tag :type="row.menuType | statusTagFilter">
                  {{ row.menuType | watchStatus}}
                </el-tag>
              </template>
            </el-table-column> -->
                        <!-- <el-table-column prop="permission" label="菜单权限" align="center" width="200"></el-table-column> -->
                        <el-table-column label="功能" align="center" prop="remark" width="80" fixed="right">
                            <template slot-scope="scope">
                                <el-tooltip v-permission="['productCategory.add']" v-if="scope.row.menuType !=1" class="item" effect="dark" content="新增" placement="top-start">
                                    <el-button @click="addClick(scope.row)" type="primary" size="mini">新增</el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" align="center" label="操作">
                            <template slot-scope="scope">
                                <div style="display: flex;flex-direction: row;justify-content: center">
                                    <el-tooltip v-permission="['productCategory.edit']" class="item" effect="dark" content="编辑" placement="top-start">
                                        <a @click="editClick(scope.row)">
                                            <i style="color: #409EFF" class="el-icon-edit"></i>
                                        </a>
                                    </el-tooltip>
                                    <el-tooltip v-permission="['productCategory.del']" class="item" effect="dark" content="删除" placement="top-start">
                                        <a style="margin-left: 10px" @click="delSysOffice(scope.row)">
                                            <i style="color: #F56C6C" class="el-icon-delete"></i>
                                        </a>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<style scoped>
.app {
    background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
}

.report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
}
.report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409eff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
}
.table-container {
    padding: 10px;
    box-sizing: border-box;
}

.el-mainBox {
    padding: 0 !important;
}
</style>
<script>
import loadMore from "@/utils/loadMore.js";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import { list, del, update } from "@/api/productCategory";
import splitpanel from "@/components/SplitPanel";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import CategoryPanel from "@/components/CategoryPanel";
export default {
    name: "productCategory-list",
    directives: { permission, loadMore },
    activated() {
        this.payLoads = new Date().getTime();
    },
    filters: {
        watchStatus(val) {
            if (val == 1) {
                return "功能";
            } else {
                return "菜单";
            }
        },
        statusTagFilter(val) {
            if (val == 1) {
                return "success";
            } else {
                return "info";
            }
        },
    },
    data() {
        return {
            payLoads: "",
            tableData: [],
            department: [],
            defaultProps: {
                children: "childrens",
                label: "name",
            },
            currentParentId: "",
            currentId: "",
            menuId: "",
            sorting: {
                id: "",
                dataSort: "",
            },
            request: "productCategory",
        };
    },
    components: {
        splitpanel,
        CategoryPanel,
    },
    created() {
        const _this = this;
        this.loadSysMenu();
        EventBus.$on("productCategory-add", (res) => {
          this.loadSysMenu();
            // // 监听新增完毕
            // let data = JSON.stringify(res);
            // let resClone = JSON.parse(data);
            // // 更新列表数组
            // if (!utils.isNull(resClone.parentId)) {
            //     let obj = utils.findTree(resClone.parentId, _this.tableData);
            //     obj.childrens.splice(0, 0, resClone);
            // } else {
            //     // 没父节点就肯定是根结点
            //     _this.tableData.splice(0, 0, resClone);
            // }
        });
        EventBus.$on("productCategory-edit", (res) => {
            // 监听修改完毕
            // 更新列表数组
            let currentObj = utils.findTree(_this.currentId, _this.tableData); //找到当前子节点
            let currentParentObj = utils.findTree(
                _this.currentParentId,
                _this.tableData
            ); //找到之前的父节点
            let nowParentObj = utils.findTree(res.parentId, _this.tableData); //找到现在的父节点

            if (!utils.isNull(res.parentId)) {
                if (_this.currentParentId != res.parentId) {
                    //代表换了父节点
                    //删掉之前父节点下的子节点
                    currentParentObj.childrens.forEach(function (item, index) {
                        if (item.id == _this.currentId) {
                            currentParentObj.childrens.splice(index, 1);
                        }
                    });
                    //循环更新数据
                    for (let key in res) {
                        if (key != "childrens") {
                            currentObj[key] = res[key];
                        }
                    }
                    //再往现在的父节点push修改好值的子节点
                    nowParentObj.childrens.splice(0, 0, currentObj);
                } else {
                    //没换父节点
                    //循环更新数据
                    for (let key in res) {
                        if (key != "childrens") {
                            currentObj[key] = res[key];
                        }
                    }
                }
            } else {
                // 没父节点就肯定是根结点
                //循环更新数据
                for (let key in res) {
                    if (key != "childrens") {
                        currentObj[key] = res[key];
                    }
                }
            }
        });
    },
    methods: {
        addClick(row) {
            var _this = this;
            if (utils.isNull(row)) {
                this.$router.push({
                    path: "/productCategory/add",
                    query: { dataSort: _this.tableData.length },
                });
            } else {
                this.$router.push({
                    path: "/productCategory/add",
                    query: { rowData: row, dataSort: _this.tableData.length },
                });
            }
        },
        editClick(row) {
            const _this = this;
            this.currentParentId = row.parentId; //记起当前父节点
            this.currentId = row.id; //记起当前id
            this.$router.push({
                path: "/productCategory/edit",
                query: { id: row.id, tableData: _this.tableData }, // 因为修改要查找上级，所以把列表传过去
            });
        },
        delSysOffice(row) {
            const _this = this;
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    del(row.id)
                        .then((response) => {
                            console.log(response);
                            // 更新列表数组
                            if (!utils.isNull(row.parentId)) {
                                const obj = utils.findTree(
                                    row.parentId,
                                    _this.tableData
                                );
                                obj.childrens.forEach(function (item, index) {
                                    if (item.id == row.id) {
                                        // 因为obj是_this.tableData取出来的，所以是同一指针，改变obj也会改变_this.tableData
                                        obj.childrens.splice(index, 1);
                                        return;
                                    }
                                });
                            } else {
                                // 没父节点就肯定是根结点
                                _this.tableData.forEach(function (item, index) {
                                    if (item.id == row.id) {
                                        _this.tableData.splice(index, 1);
                                    }
                                });
                            }
                        })
                        .catch((error) => {});
                })
                .catch(() => {});
        },
        handleNodeClick(data) {
            console.log(data);
            this.menuId = data.id;
            this.loadSysMenu();
        },
        loadSysMenu() {
            const _this = this;
            const params = new URLSearchParams();
            params.append("id", this.menuId);
            list(params)
                .then((response) => {
                    console.log(response);
                    if (utils.isNull(_this.menuId)) {
                        console.log("查看菜单");
                        console.log(response.data);
                        _this.department = response.data;
                    }
                    _this.tableData = response.data;
                })
                .catch((error) => {});
        },
        notClick() {
            this.productCategory = 0;
            this.deleted = false;
            this.loadSysMenu();
        },
        delClick() {
            this.deleted = true;
            this.productCategory = "";
            this.loadSysMenu();
        },
        nodeClick(data) {
            this.deleted = false;
            this.menuId = data.id;
            this.loadSysMenu();
        },
    },
};
</script>
